<template>
  <router-link :to="action" class="bottom-banner-container">
    <div
      class="main-block-with-cropped-mirrored banner1 flex flex-center no-wrap"
      :style="{ background: color }"
    >
      {{ text }}
    </div></router-link
  >
</template>

<script>
export default {
  name: "BannerOne",
  props: {
    text: {
      type: String,
      default: "button",
    },
    color: {
      type: String,
      default: "#5d76fb",
    },
    action: {
      type: String,
      default: "/",
    },
  },
  setup() {
    return {};
  },
};
</script>
<style scoped>
.bottom-banner-container {
  text-decoration: none;
}
.banner1 {
  font-weight: 700;
  font-size: 16px;
  width: 190px;
  color: #ffffff;
  text-align: center;
  height: 70px;
  padding: 20px;
}
@media screen and (max-width: 820px) {
  .banner1 {
    width: 100%;
  }
  .bottom-banner-container {
    width: 100%;
  }
}
</style>
